<%--
  User: Viktor
  Date: 10/13/13
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <style>
        th{
            font-weight: normal;
            background-color: #652299;
            color: white;
        }
        tr{
            background-color: #F4E3FF;


        }
        tr:hover { background: #be4bff }
        table{
            font: sans-serif;
            font-family: Helvetica;
            border: 0;

        }
    </style>
    <%--<script type = "text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>--%>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        var results;
        $(document).ready(function() {
            $("#start").datepicker({
                //defaultDate: 0,
                dateFormat: 'yy-mm-dd'

            });
            $( "#end" ).datepicker({
                //defaultDate: 0,
                dateFormat: 'yy-mm-dd'

            });
            $('#start').datepicker("setDate", new Date());
            $('#end').datepicker("setDate", new Date());
        });
        function doReport()
        {

            var selected_report = $('#report_type').val();
            switch (true) {
                case (selected_report == "top_price"):
                    report_top_price(0);
                    break;
                case (selected_report == "top_dest"):
                    report_top_dest(0);
                    break;

                default:

            }

        }
        function downloadReport()
        {

            var selected_report = $('#report_type').val();
            switch (true) {
                case (selected_report == "top_price"):

                    window.location='sendReport?report_type=top_price&startdate='+$("#start").val()+'&enddate='+$("#end").val();


                    break;
                case (selected_report == "top_dest"):
                    window.location='sendReport?report_type=top_dest&startdate='+$("#start").val()+'&enddate='+$("#end").val();
                    break;

                default:

            }

        }


        function report_top_price(page)
        {



            $.post("reportServlet", { report_type: "top_price", startDate: $("#start").val(), endDate: $("#end").val()},
                    function(data) {
                        results = data;
                        displayTablePrice(data);


                    });

        }
        function report_top_dest(page)
        {



            $.post("reportServlet", { report_type: "top_dest", startDate: $("#start").val(), endDate: $("#end").val()},
                    function(data) {
                        results = data;
                        displayTableDest(data);


                    });

        }
        function displayTablePrice(data)
        {
            $('#reports').empty();


            var rowstring = "";
            rowstring+='<tr>';

            rowstring+='<th>'+ "Location" +'</th>';
            rowstring+='<th>'+ "Price" +'</th>';
            rowstring+='<th>'+ "CheckIn Date" +'</th>';
            rowstring+='<th>'+ "CheckOut Date" +'</th>';
            rowstring+='<th>'+ "Stars" +'</th>';

            rowstring+='</tr>';
            $('#reports').append(rowstring);
            $.each(data.orderlist, function(index, element){
                rowstring = "";

                rowstring+='<tr>';

                rowstring+='<td>'+ data.locationlist[index] +'</td>';
                rowstring+='<td>'+ element.price +'</td>';
                rowstring+='<td>'+ element.checkInDate +'</td>';
                rowstring+='<td>'+ element.checkOutDate +'</td>';
                rowstring+='<td>'+ element.hotelStars +'</td>';

                rowstring+='</tr>';
                $('#reports').append(rowstring);
            });
            //TODO: pagination  (data.count is total entries count)

        }
        function displayTableDest(data)
        {
            $('#reports').empty();


            var rowstring = "";
            rowstring+='<tr>';

            rowstring+='<th>'+ "Hotel name" +'</th>';
            rowstring+='<th>'+ "Hotel id" +'</th>';
            rowstring+='<th>'+ "Orders count" +'</th>';


            rowstring+='</tr>';
            $('#reports').append(rowstring);
            $.each(data, function(index, element){
                rowstring = "";

                rowstring+='<tr>';


                rowstring+='<td>'+ element.name +'</td>';
                rowstring+='<td>'+ element.id +'</td>';
                rowstring+='<td>'+ element.count +'</td>';

                rowstring+='</tr>';
                $('#reports').append(rowstring);
            });
            //TODO: pagination  (data.count is total entries count)

        }
    </script>
</head>
<body>

<div id="base">
    <div id="reports_div" style="left: 10; float: left; position: absolute; width: 50%">
        <table id="reports" class="reportTable"></table>
    </div>
    <div id="controls" style="right: 10; position: relative; float: right; width: 50%">
        <select name="report_type" style="width: 150; right: 10" id="report_type">
            <option value="top_price">Most valuable orders</option>
            <option value="top_dest">Most popular destinations</option>

        </select>
        <br>
        <li>Check-in: <input type="text" id="start" size="15" readonly/>
            Check-out: <input type="text" id="end" size="15" readonly/></li>
        <br>
        <input type="button" onclick="doReport()" value="Create">
        <input type="button" onclick="downloadReport()" value="Download">
    </div>
</div>

</body>
</html>